<template>
  <div class="deposit">
    <div class="deposit-btns">
      <el-upload
        action=""
        :multiple='true'
        :auto-upload="false"
        :show-file-list="false"
        :on-change="uploadFile">
        <el-button type="primary" size="small">上传上链存证</el-button>
      </el-upload>
    </div>
    <div class="deposit-list" v-if="deposit.uploadRes.fingerprint">
      <p>
        上传成功！<br>
        文件地址：<a :href="`/${deposit.uploadRes.filePath}`" :download="deposit.uploadRes.fileName">{{deposit.uploadRes.fileName}}</a><br>
        文件指纹：{{deposit.uploadRes.fingerprint}} <el-button class="downloadBtn" type="primary" size="mini" @click="downloadTxt(deposit.uploadRes.fingerprint, `上链存证-${deposit.uploadRes.fileName}`)">下载指纹</el-button> <br>
        创建时间: {{deposit.uploadRes.createTime}}
      </p>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { downloadTxt } from '@/utils'
export default defineComponent({
  name: 'deposit',
  setup() {
    const store = useStore();
    let deposit:any = reactive({
      uploadRes: {
        fingerprint: '',
        fileName: '',
        filePath: '',
        createTime: '',
      }
    });
    const uploadFile = async(file) => {
      const formData = new FormData();
      formData.append('file', file.raw, file.name);
      formData.append('action', 'save');
      Object.keys(deposit.uploadRes).forEach(item => {
        deposit.uploadRes[item] = '';
      });
      const data = await store.dispatch('fileUpload', formData);
      deposit.uploadRes = data;
    };
    onMounted(() => {});
    return {
      uploadFile,
      downloadTxt,
      deposit
    };
  },
});
</script>
<style lang="scss" scoped>
.deposit {
  .deposit-btns {
    @extend %container;
  }
  .deposit-list {
    @extend %container;
    margin-top: 10px;
    p {
      line-height: 30px;
    }
  }
  .downloadBtn {
    margin-left: 10px;
  }
}
</style>











